<template>
  <div class="address-main">
    <nav-bar :title="$t('h.新增地址/修改地址')">
      <template #right>
        <i class="save" @click="submit">{{ $t('h.保存') }}</i>
      </template>
    </nav-bar>
    <div class="address-form">
      <el-form :model="form">
        <el-form-item prop="shortname">
          <el-input v-model="form.shortname" :placeholder="$t('h.国家')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="province">
          <el-input v-model="form.province" :placeholder="$t('h.省份')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="city">
          <el-input v-model="form.city" :placeholder="$t('h.城市')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="address">
          <el-input v-model="form.address" :placeholder="$t('h.详细地址')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="zip">
          <el-input v-model="form.zip" :placeholder="$t('h.邮编')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="fullname">
          <el-input v-model="form.fullname" :placeholder="$t('h.收件人')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" :placeholder="$t('h.手机号')" show-word-limit maxlength="64"></el-input>
        </el-form-item>
        <el-form-item prop="default">
          <div class="button-switch">
            <span>{{ $t('h.设为默认地址') }}</span>
            <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.default"
                active-color="#002FFF"
                inactive-color="#f2f2f2">
            </el-switch>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {addEditAddress, getAddress, getUserInfo} from '@/api/apiFox';

export default {
    data(){
      return{
        form:{
          shortname:'',//国家
          province:'',//省份
          city:'',//城市
          address:'',//详细地址
          fullname:'', //收货人
          mobile:'',//手机号
          default:0,//是否默认地址
        },
        open: true,
        value: ''
      }
    },
  mounted() {
    if(this.$route.query?.id){
      getAddress().then(res => {
        const current = res.data.find(item => item.id == this.$route.query.id)
        this.$set(this,'form',current)
      })
    }
  },
    methods: {
      async submit(){
        const { uid } = await getUserInfo()
        addEditAddress({
          ...this.form,
          user_id:uid
        }).then(() => {
          this.$router.go(-1)
        })
      },
      goBack() {
        this.$router.go(-1)
      },
    }
  }
</script>
<style scoped lang="scss">
.save{
  display: flex;
  width: 50px;
  position: absolute;
  color: #aaa;
  font-size: 14px;
  right: 0;
  font-style: normal;
}
.address-main {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: #fff;

  .address-header {
    width: 100%;
    height: 45px;
    display: flex;
    background: #fff;
    justify-content: center;
    align-items: center;
    position: relative;

    span {
      position: absolute;
      left: 10px;
    }

    .center {
      width: 100%;
      height: 45px;
      text-align: center;
      line-height: 45px;
      font-size: 15px;
    }
    .save{
      display: flex;
      width: 50px;
      position: absolute;
      color: #aaa;
      font-size: 14px;
      right: 0;
      font-style: normal;
    }
  }
  .address-form{
    width: 100%;
    padding: 3%;
    box-sizing: border-box;
    .select{
      margin-top: 20px;
      width: 100%;
      display: flex;
    }
  }
  .button-switch{
    width: 100%;
    height: 43px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3%;
    box-sizing: border-box;
    span{
      font-size: 14px;
    }
  }
}
</style>
